<template>
  <div class="detail">
     <!-- 详情页头部 -->
    <van-nav-bar
      :title="obj.community"
      left-arrow
    >
      <template #left>
        <van-icon  name="arrow-left" @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <!-- 轮播图部分 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in obj.houseImg" :key="index">
        <img :src="'http://liufusong.top:8080'+item" alt="">
      </van-swipe-item>

    </van-swipe>
    <!--  -->
    <van-cell title="单元格"  label="描述信息" >
      <template #label>
        <van-tag color="#ccc" text-color="#7232dd"  type="primary">近地铁</van-tag>
      </template>
      <template #title>
        <p>1</p>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <div class="box">
          <div>
            <span class="num">{{obj.price}}</span><span>/月</span>
            <p>租金</p>
          </div>
          <div>
            <span class="num">{{obj.roomType}}</span>
            <p>房型</p>
          </div>
          <div>
            <span class="num">{{obj.size}}平米</span>
            <p>面积</p>
          </div>
        </div>
      </template>
    </van-cell>
    <van-cell >
      <template #title>
       <div class="detailscope">
         <div >
          <span>装修：</span><span>精装</span>
        </div>
        <div>
          <span>朝向：</span><span v-for="item in obj.oriented" :key="item">{{item}}</span>
        </div>
        <div>
          <span>楼层：</span><span>{{obj.floor}}</span>
        </div>
        <div>
          <span>类型：</span><span>普通住宅</span>
        </div>
        </div>
      </template>
    </van-cell>
    <div class="middle">
      <!-- 小区地图 -->
    <van-cell>
      <template #title>
        小区:
        <span>天三星城</span>
      </template>
    </van-cell>
    <div class="map-box">
        <baidu-map v-if="show" class="map" :center="center" :zoom="15">
           <mini-map :text="obj" :position="{lng: obj.coord.longitude, lat: obj.coord.latitude}" />
        </baidu-map>
      <!-- <baidu-map id="bm-view" class="bm-view"  :zoom="zoom" v-if=isshow>

      </baidu-map> -->
    </div>
    <van-cell title="房屋配套" >
      <template #title>
        <p class="commonh">房屋配套</p>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <div class="house-copesetting">
          <div>
            <van-icon name="like-o" />
            <span>衣柜</span>
        </div>
        </div>
      </template>
    </van-cell>
    </div>

    <van-cell title="房屋概况" >
      <template #title>
        <p class="commonh">房屋概况</p>
      </template>
    </van-cell>
    <div class="houseintroduce">
      <div class="intro">
      <div class="box">
        <van-image
          width="52"
          height="52"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="right">
          <p>王女士</p>
          <p>
            <van-icon name="warning-o" />已认证房主
          </p>
        </div>
      </div>
      <van-button plain type="primary">发消息</van-button>
    </div>
    <div class="saydetail">
      1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。 2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。 3.人车分流，环境优美。 4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
    </div>
    </div>
      <van-cell title="猜你喜欢" >
      <template #title>
        <p class="commonh">猜你喜欢</p>
      </template>
    </van-cell>
    <!-- 相关的推荐 -->
    <!-- <card-list></card-list> -->
    <!-- 底部导航 -->
    <van-tabbar >
      <van-button @click="addordeletefavorite($route.params.houseCode)" type="default">
        收藏
        <template #icon >
          <van-icon :class="{red:isshowcollect}" name="star" />
        </template>
      </van-button>
      <van-button type="default">在线咨询</van-button>
      <van-button type="primary">电话预约</van-button>
    </van-tabbar>
  </div>
</template>

<script>
// import { gethousedetail, getfavoritehouse, addhouselike, deletehouselike } from '@/api/user'
import MiniMap from '../Map/components/MiniMap.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapdetailState, mapActions: mapdetailActions } = createNamespacedHelpers('details')
export default {
  components: { MiniMap },
  data () {
    return {
      // center: { lat: 0, lng: 0 },
      // show: false,
      // obj: {},
      // zoom: 11,
      // hotCity: [
      //   {
      //     name: '北京',
      //     lng: 116.404,
      //     lat: 39.915
      //   },
      //   {
      //     name: '上海',
      //     lng: 121.48,
      //     lat: 31.22
      //   },
      //   {
      //     name: '广州',
      //     lng: 113.27,
      //     lat: 23.13
      //   },
      //   {
      //     name: '深圳',
      //     lng: 114.03,
      //     lat: 22.32
      //   }
      // ],
      // isshowcollect: ''
    }
  },

  created () {
    this.gethousedetails(this.$route.params.houseCode)
    this.getfavoritehouses(this.$route.params.houseCode)
  },
  computed: {
    ...mapdetailState(['obj', 'isshowcollect', 'center', 'show'])
  },

  methods: {
    ...mapdetailActions(['gethousedetails', 'getfavoritehouses', 'addordeletefavorite'])
    // async  loadhousedetail (id) {
    //   const res = await gethousedetail(id)
    //   // console.log(res)
    //   this.obj = res.data.body
    //   this.$set(this.center, 'lng', this.obj.coord.longitude)
    //   this.$set(this.center, 'lat', this.obj.coord.latitude)
    //   this.show = true

    //   // console.log(this.center)
    //   // this.isshow = true
    // },

    // async  loadfavoriatehouse () {
    //   console.log(this.$route.params.houseCode)
    //   const res = await getfavoritehouse(this.$route.params.houseCode)
    //   console.log(res)
    //   this.isshowcollect = res.data.body.isFavorite
    // },
    // async  addordeletecollect () {
    //   if (this.isshowcollect) {
    //     await deletehouselike(this.$route.params.houseCode)
    //     this.isshowcollect = false
    //   } else {
    //     await addhouselike(this.$route.params.houseCode)
    //     this.isshowcollect = true
    //   }
    // }

  }
}
</script>

<style scoped lang='less'>
.van-tabbar {
  display: flex;
  .van-button{
    flex: 1;
    height: 50px;
  }
}
.red {
  color: red;
}
.detail{
  background-color: #eee;
}
/deep/.van-nav-bar__title{
  font-size: 16px !important;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe{
  height: 252px;
}
.van-cell{
  .box {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    p{margin: 0;}
    span{
      color: #FA5741;
    }
    .num{
      font-size: 18px;
      font-weight: 700;
    }
  }
  .detailscope{
    display: flex;
    flex-wrap: wrap;
    div{
      width: 50%;
      font-size: 13px;
      // background-color: pink;
      span{
        &:nth-child(1){
          color: #999999;
        }
      }
    }

  }

}
.map-box{
  height: 145px;
  // background-color: pink;
  .map {
  width: 100%;
  height: 145px;
}
}
.commonh{
  color: #333;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.house-copesetting{
  padding: 0 25px;
  display: flex;
  // flex-direction: column;
  // justify-content: centert

  div{
    text-align: center;
    display: flex;
    flex-direction: column;

  }
  // align-items: center;
}
.middle{
  padding: 8px 0;
}
/deep/.van-cell::after{
  border-bottom: 1px solid #cecece;
}
.houseintroduce{
  background-color: #fff;
  .intro{
  display: flex;
  padding-top: 8px;
  padding-left: 5px;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  padding-right :15px; ;
  /deep/.van-button{
      width: 70px;
      height: 29px ;
      font-size: 14px;
      padding: 0;
      }
  .box{
    display: flex;
    align-items: center;

    .right{
      margin-left: 15px;
      p{
        margin: 0;
        &:nth-child(1){
          color: #333;
          font-size: 14px;
        }
        &:nth-child(2){
          color: #fa5741;
          font-size: 12px;
        }
      }

    }
  }
}
.saydetail{
  margin-top: 20px;
  height: 132px;
}
}

</style>
